<?php
session_start();
?>
<head>
    <meta charset="utf-8">
    <title>Modern Menu</title>
    <style>
        #menu5{font-family:Arial,sans-serif;font-size:12px;background-color: #fafafa;width:900px;height:40px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;padding:0 20px;display:block;line-height:1}
        #menu5 h1,
        #menu5 ul,
        #menu5 p,
        #menu5 img{margin:0;padding:0;border:0}
        #menu5 h1{font-weight:400}
        #menu5 ul{list-style:none}
        #menu5 a{text-decoration:none;color:
                #5f5f5f}
        #menu5 .menu-label{font-weight:700;text-transform:uppercase}
        #menu5 .menu-top>li{float:left;position:relative;text-align:center;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;-ms-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}
        #menu5 .menu-top>li:hover{background-color:
                #0af;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;-ms-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}
        #menu5 .menu-top .menu-right{float:right}
        #menu5 .menu-button{display:block;line-height:40px;padding:0 20px;color:
                #5f5f5f;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 li:hover .menu-button{color:
                #fafafa;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 .menu-drop{padding-right:15px}
        #menu5 .menu-drop .menu-label{padding-right:20px;background:url(../img/menu1-drop1.png) no-repeat right;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s;transition:background .2s}
        #menu5 li:hover .menu-drop .menu-label{background:url(../img/menu4-drop2.png) no-repeat right;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s;transition:background .2s}
        #menu5 .menu-dropdown{text-align:left;background-color:
                #0af;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-ms-border-radius:0 0 5px 5px;-o-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;position:absolute;left:-5000px;opacity:0;z-index:100}
        #menu5 li:hover .menu-dropdown{left:0;opacity:1;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}
        #menu5 .menu-right:hover .menu-dropdown{left:auto;right:0}
        #menu5 .menu-sub{margin:5px 0}
        #menu5 .menu-sub li{white-space:nowrap;-webkit-transition:background-color .1s;-moz-transition:background-color .1s;-ms-transition:background-color .1s;-o-transition:background-color .1s;transition:background-color .1s}
        #menu5 .menu-sub li:hover{background:
                #fafafa url(../static/img/menu4-select.png) no-repeat 10px;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;-ms-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}
        #menu5 .menu-subbutton{display:block;padding:7px 20px;line-height:1.3;color:
                #fafafa;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 .menu-sub li:hover .menu-subbutton{color:
                #5f5f5f;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 .menu-desc{font-style:italic;color:
                #eaeaea;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 .menu-sub li:hover .menu-desc{color:
                #707070;-webkit-transition:color .2s;-moz-transition:color .2s;-ms-transition:color .2s;-o-transition:color .2s;transition:color .2s}
        #menu5 .menu-row{vertical-align:text-top;display:inline-block;zoom:1;*display:inline}
        #menu5 .menu-row .menu-sub{margin:0}
        #menu5 h1{font-size:2em;color:
                #f0f0f0}
        #menu5 p{color:
                #f0f0f0}
        #menu5 .menu-dropdown3 h1{margin:0 0 5px 20px}
        #menu5 .menu-dropdown3 .menu-row{border-right:1px dotted
        #707070;margin:5px 0}
        #menu5 .menu-dropdown3 .menu-row:last-child{border-right:0}
        #menu5 .menu-dropdown4 h1{margin:0 0 5px 20px}
        #menu5 .menu-dropdown4 .menu-row div{border-right:1px dotted
        #707070;margin:5px 0 10px}
        #menu5 .menu-dropdown4 .menu-row:last-child div{border-right:0}
        #menu5 .menu-dropdown4 .menu-row div:last-child{margin-bottom:5px}
        #menu5 .menu-dropdown6 img{margin-right:5px;vertical-align:middle}
        #menu5 .menu-dropdown6 .menu-label{vertical-align:middle}

        #menu5 .menu-dropdown6 .menu-subbutton{padding:5px 20px}

        .menu-dropdown7 p{margin-top:7px}
        .menu-dropdown7 h1{color:
                #f0f0f0;padding-bottom:3px;border-bottom:1px solid
        #e0e0e0}

        /* Reset */
        /* v2.0 | 20110126
          http://meyerweb.com/eric/tools/css/reset/
          License: none (public domain)
        */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* Main */


        h1 {
            color: #707070;
            font-size: 28px;
            font-weight: normal;
        }
        #menu5{
            margin: 5px auto 40px;
        }

    </style>
    <script>
        window.onload=function (ev) {
            var script = document.createElement("script");
            script.setAttribute("type","text/javascript");
            script.setAttribute("src","static/js/simpleAjax.js");
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        function sign_in(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            ajaxRequest("login.php","get",{username:username,password:password},function () {

                if(this.responseText == "succ")
                    window.location="prepare.php";
                else {
                    alert(this.responseText);
                    window.location = "login_page.php";
                }

            },function () {
                alert("error occur in login");
                window.location="login_page.php";
            })
        }
        function jump_regist(){
            window.location="regist_page.php";
        }
    </script>
</head>

<div id="menu5">
    <ul class="menu-top">
        <li><a href="home.php" class="menu-button"><span class="menu-label">Home</span></a></li>
        <li><a href="prepare.php" class="menu-button "><span class="menu-label">prepare</span></a>
        </li>
        <?php

            if(isset($_SESSION["username"])){
                ?>
                <li><a href="history.php" class="menu-button "><span class="menu-label">history</span></a>

                </li>
                <li><a href="#" class="menu-button "><span class="menu-label">question mange</span></a>
                    <div class="menu-dropdown menu-dropdown1">
                        <ul class="menu-sub">
                            <li><a href="add_question_page.php" class="menu-subbutton"><span class="menu-label">add public question</span></a></li>
                            <li><a href="add_private_question_page.php" class="menu-subbutton"><span class="menu-label">add private question</span></a></li>
                            <li><a href="mange.php" class="menu-subbutton"><span class="menu-label">question list</span></a></li>

                        </ul>
                    </div>
                </li>

                <li class="menu-right"><a href="#" class="menu-button "><span class="menu-label"><?=$_SESSION["username"]?></span></a>
                    <div class="menu-dropdown menu-dropdown1">
                        <ul class="menu-sub">
                            <li ><a href="logout.php" class="menu-subbutton"><span class="menu-label">Sign Out</span></a></li>
                        </ul>
                    </div>
                </li>
                <?php
            }else{
                ?>
                <li class="menu-right" ><a href="login_page.php" class="menu-button "><span class="menu-label">Sign In</span></a>

                </li>
                <?php
            }
        ?>


    </ul>
</div>
